<script>
export default {
  name: "box",
  props: {
    showTitle: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ""
    },
    height: {
      type: String,
      default: "470rpx"
    }
  }
}
</script>

<template>
  <view class="box" :style="{ height }">
    <view class="box-title" v-if="showTitle">
      <view class="box-rect"></view>
      <view class="box-text">{{ title }}</view>
    </view>
    <slot></slot>
  </view>
</template>

<style scoped lang="scss">
.box {
  width: 100%;
  background: #FFFFFF;
  box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(34,150,246,0.36);
  border-radius: 30rpx 30rpx 30rpx 30rpx;
  position: relative;
  margin-top: 30rpx;
  .box-title {
    padding: 20rpx;
    display: flex;
    align-items: center;
    .box-rect {
      width: 8rpx;
      height: 30rpx;
      background-color: #2498F6;
      border-radius: 2rpx;
      margin-right: 16rpx;
    }
    .box-text {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 30rpx;
      color: #555555;
      line-height: 53rpx;
    }
  }
}
</style>